<template>
  <el-dialog
    v-if="show"
    v-dialogDrag
    width="34%"
    title="用户修改信息"
    :close-on-click-modal="false"
    :visible.sync="show"
    :before-close="handleClose"
  >
    <el-row :gutter="10">
      <el-form ref="elForm" :model="dialogChangeData" :rules="rules" size="mini" label-width="100px" label-position="left">
        <el-col :span="20">
          <el-form-item label="用户编码" prop="yhbm">
            <el-input v-model="dialogChangeData.yhbm" placeholder="请输入用户编码" :disabled="true" clearable :style="{ width: '100%' }" />
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="用户名称" prop="yhmc">
            <el-input v-model="dialogChangeData.yhmc" placeholder="请输入用户名称" :disabled="true" clearable :style="{ width: '100%' }" />
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="起始时间" prop="qssj">
            <el-date-picker
              v-model="dialogChangeData.qssj"
              type="datetime"
              format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm"
              :style="{ width: '100%' }"
              placeholder="请选择起始时间"
              :clearable="false"
              @change="qssjTimer"
            />
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="终止时间" prop="zzsj">
            <el-date-picker
              v-model="dialogChangeData.zzsj"
              type="datetime"
              format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm"
              :style="{ width: '100%' }"
              placeholder="请选择终止时间"
              :clearable="false"
              @change="zzsjTimer"
            />
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="持续时间" prop="cxsj">
            <el-input v-model="dialogChangeData.cxsjT" placeholder="请输入持续时间" :disabled="true" :style="{ width: '100%' }">
              <template
                slot="append"
              >小时</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="停电容量" prop="tdrl">
            <el-input v-model="dialogChangeData.tdrl" :disabled="tdzrm" placeholder="请输入停电容量" clearable :style="{ width: '100%' }">
              <template slot="append">KAV</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div slot="footer">
      <el-button size="small" @click="handleClose">取消</el-button>
      <el-button
        type="primary"
        size="small"
        @click="handelConfirm"
      >确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { tdUserChange } from '@/api/sjwh/yxgy'
import { DateDiffHour } from '@/utils/moment.js'
export default {
  props: {
    // item值 v-model
    dialogChangeDataT: {
      required: true,
      type: Object
    },
    // 父级表单值
    addForm: {
      required: true,
      type: Object
    },
    tdyhEditDialog: {
      required: true,
      type: Object
    }
  },
  data() {
    return {
      show: false,
      // 传递后台的值
      dialogChangeData: {
        id: '',
        czy: '',
        yhbm: '',
        yhmc: '',
        qssj: '',
        zzsj: '',
        tdrl: '',
        cxsj: '',
        cxsjT: ''
      },
      // dialogChangeData: this.dialogChange,
      rules: {
        yhbm: [{ required: true, message: '请输入用户编码', trigger: 'blur' }],
        yhmc: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
        qssj: [{ required: true, message: '请选择起始时间', trigger: 'change' }],
        zzsj: [{ required: true, message: '请选择终止时间', trigger: 'change' }],
        tdrl: [{ required: true, message: '请输入停电容量', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    tdzrm() {
      let key = true
      if (
        this.addForm.tdzrm === '5040' ||
        this.addForm.tdzrm === '5041'
      ) {
        key = false
      }
      return key
    }
  },
  watch: {
    tdyhEditDialog: {
      deep: true,
      immediate: true,
      handler(newVal, oldVal) {
        if (newVal.show) {
          this.saveTimer()
          this.show = newVal.show
        } else {
          this.show = newVal.show
        }
      }
    }
  },
  methods: {
    handelConfirm() {
      if (
        Number(this.dialogChangeData.tdrl) <=
        Number(this.dialogChangeDataT.tdrl)
      ) {
        this.$refs['elForm'].validate(async valid => {
          if (!valid) return
          const res = await tdUserChange({ yxGytdyh: this.dialogChangeData })
          if (res.code === 0) {
            this.$emit('updateUser')
          }
        })
      } else {
        this.$message.error('停电容量超出之前范围')
      }
    },
    handleClose() {
      this.$emit('handleClose')
    },
    qssjTimer() {
      if (this.dialogChangeData.qssj >= this.addForm.qssj) {
        this.timeRange()
        // this.$emit('updateTime')
      } else {
        this.$message.error('error 起始时间不能小于之前范围')
        this.dialogChangeData.qssj = ''
      }
    },
    zzsjTimer() {
      if (this.dialogChangeData.zzsj <= this.addForm.zzsj) {
        this.timeRange()
      } else {
        this.$message.error('error 终止时间不能大于之前范围')
        this.dialogChangeData.zzsj = ''
      }
    },
    // 时间计算
    timeRange(item) {
      if (this.dialogChangeData.qssj && this.dialogChangeData.zzsj) {
        if (this.dialogChangeData.zzsj > this.dialogChangeData.qssj) {
          const num = DateDiffHour(
            this.dialogChangeData.zzsj,
            this.dialogChangeData.qssj
          )
          this.$nextTick(() => {
            this.dialogChangeData.cxsj = num
            this.dialogChangeData.cxsjT = Math.round(num * 100) / 100
          })
          this.dialogChangeData.cxsj > 12
            ? this.$message({
              message: '停电时间大于12小时',
              type: 'warning'
            })
            : ''
        } else {
          // 起始大于终止置空
          this.dialogChangeData.qssj = ''
          this.dialogChangeData.zzsj = ''
          this.$message.error('起始时间不能大于终止时间')
        }
      }
    },
    saveTimer() {
      this.dialogChangeData.qssj = this.dialogChangeDataT.qssj
      this.dialogChangeData.zzsj = this.dialogChangeDataT.zzsj
      this.dialogChangeData.cxsj = this.dialogChangeDataT.cxsj
      this.dialogChangeData.zzsj = this.dialogChangeDataT.zzsj
      this.dialogChangeData.cxsjT = this.dialogChangeDataT.cxsjT
      this.dialogChangeData.id = this.dialogChangeDataT.id
      this.dialogChangeData.czy = this.dialogChangeDataT.czy
      this.dialogChangeData.tdrl = this.dialogChangeDataT.tdrl
      this.dialogChangeData.yhbm = this.dialogChangeDataT.yhbm
      this.dialogChangeData.yhmc = this.dialogChangeDataT.yhmc
    }
  }
}
</script>

<style>

</style>
